<template>
  <div class="alone-outBox f14">

    <el-card class="box-card">
      <!-- <div slot="header"
           class="clearfix">
        <el-page-header @back="goBack"
                        content="用户详情">
        </el-page-header>
      </div> -->
      <div class="text item">
        <span class="blue-gan">|</span>
        <span class="title-font" style="margin-left:10px">基本信息</span>
      </div>
      <el-card class="box-card card-style">
        <div class="text item">
          <div class="name-font "> <span>{{ userInfo.name }}</span>
          </div>
          <div class="name-font "> <span style="font-weight:400">用户来源：用户报名</span>
          </div>
          <div class="name-font "> <span style="font-weight:400">来源时间：{{ userInfo.createDate }}</span>
          </div>
          <div class="name-font "> <span style="font-weight:400">手机号：{{ userInfo.mobile }}</span>
          </div>
          <div class="name-font "> <span style="font-weight:400">邮箱：{{ userInfo.email }}</span>
          </div>

          <div class="name-font "> <span style="font-weight:400">所属行业：{{ userInfo.industry }}</span>
          </div>
          <div class="name-font "> <span style="font-weight:400">单位类型：{{ userInfo.unitType }}</span>
          </div>
          <div class="name-font "> <span style="font-weight:400">单位名称：{{ userInfo.company }}</span>
          </div>
          <div class="name-font "> <span style="font-weight:400">职位：{{ userInfo.dutyType }}</span>
          </div>
        </div>
      </el-card>
      <div class="text item" style="margin-top:20px;">
        <span class="blue-gan">|</span>
        <span class="title-font" style="margin-left:10px">用户轨迹</span>
      </div>
      <el-card class="box-card" style="margin-top: 28px;padding-bottom: 40px;">
        <el-tabs v-model="tipName" @tab-click="handleClick">
          <el-tab-pane :label="meetTabName" name="1">
            <div>
              <el-table :data="tableMeetData" v-loading="loading" style="width: 100%">
                <el-table-column prop="meettype" label="会议类型" min-width="100">
                  <template slot-scope="scope">
                    <div v-if="scope.row.meettype == 1">
                      定制研讨会
                    </div>
                    <div v-if="scope.row.meettype == 2">
                      定制厂商会
                    </div>
                    <div v-if="scope.row.meettype == 3">
                      自助厂商会
                    </div>
                    <div v-if="scope.row.meettype == 4">
                      高级定制研讨会
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="starttime" label="会议时间" min-width="170">
                  <template slot-scope="scope">
                    <div v-if="scope.row.meettype == 1 || scope.row.meettype == 4">
                      {{ formatDate(scope.row.starttime) + " 至 " + formatDate(scope.row.VideoEndDate) }}
                    </div>
                    <div v-if="scope.row.meettype == 2 || scope.row.meettype == 3">
                      {{ formatDate(scope.row.starttime) }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="会议名称" min-width="250">
                </el-table-column>
                <el-table-column prop="industryonename" label="所属行业" min-width="150">
                  <template slot-scope="scope">
                    {{ scope.row.industryonename == undefined ? '' : scope.row.industryonename + "/" + scope.row.industrytwoname == undefined ? '' : scope.row.industrytwoname }}
                  </template>
                </el-table-column>
                <el-table-column prop="imsorttwoname" label="原理" min-width="250">
                  <template slot-scope="scope">
                    {{ scope.row.imsortonename == undefined ? '' : scope.row.imsortonename + "/" + scope.row.imsorttwoname + "/" + scope.row.imsortthreename }}
                  </template>
                </el-table-column>
                <el-table-column prop="isattend" label="状态">
                  <template slot-scope="scope">
                    {{ scope.row.isattend == 0 ? "未出席会议" : "出席会议" }}
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-tab-pane>
          <el-tab-pane :label="videoTabName" name="2">
            <div>
              <el-table :data="tableVideoData" v-loading="loading" style="width: 100%">
                <el-table-column prop="CreateDate" label="观看时间">
                  <template slot-scope="scope">

                    {{ formatDate(scope.row.CreateDate) }}
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="视频名称">
                </el-table-column>
                <el-table-column prop="imsortonename" label="行业">
                  <template slot-scope="scope">
                    {{ scope.row.imsortonename + "/" + scope.row.imsorttwoname + "/" + scope.row.imsortthreename }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-card>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import Cookies from 'js-cookie'
import indexapi from '@/api/index'
import { encryptionPhone, encryptionEmail } from '@/utils/commin'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      loading: false,
      personId: this.$route.query.personId,
      userName: this.$route.query.userName,
      videoTabName: '视频（0）',
      meetTabName: '会议（0）',
      searchObj: {
        imshowId: Cookies.get('imShowId')
          ? Cookies.get('imShowId')
          : '',
        limit: 10,
        page: 1
      },
      total: 0,
      limit: 10,
      page: 1,
      userInfo: {},
      tipName: '1',
      tableMeetData: [],
      tableVideoData: []
    }
  },
  mounted() {
    this.getUserInfoById(this.personId)
    this.getMeetListByUser(this.userName, this.searchObj.imshowId)
    this.getVideoListByUser(this.userName, this.searchObj.imshowId)
    // this.getclassification();
    // this.SearchList()
  },

  methods: {
    // 格式时间
    formatDate(value) {
      this.value1 = new Date(value)// value.createdTime是prop绑定的字段名称
      const dateValue = this.$moment(Number(this.value1)).format('YYYY-MM-DD HH:mm:ss')// $moment专门转化时间的插件（使用时需要下载引入）
      return dateValue
    },
    goBack() {
      this.$router.push({ path: '/user/index' })
    },
    handleClick(tab, event) {
      this.loading = false
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit
      this.searchObj.page = val.page
      this.SearchList()
    },
    // 获取用户信息
    getUserInfoById(personId) {
      indexapi.video.getMeetPersonByPersonid({ personid: personId }).then((res) => {
        this.userInfo = res.data
        this.userInfo.mobile = encryptionPhone(this.userInfo.mobile)
        this.userInfo.email = encryptionEmail(this.userInfo.email)
      })
    },
    // 获取会议列表
    getMeetListByUser(username, imshowId) {
      indexapi.video.getMeetingByImshoId({ username: username, imshowId: imshowId }).then((res) => {
        this.tableMeetData = res.data
        this.meetTabName = '会议（' + res.data.length + ')'
      })
    },
    // 获取视频列表
    getVideoListByUser(username, imshowId) {
      indexapi.video.getVideoByImshowId({ username: username, imshowId: imshowId }).then((res) => {
        this.tableVideoData = res.data
        this.videoTabName = '视频（' + res.data.length + ')'
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none !important;
}

.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}

.flex_bt {
  justify-content: space-between;
}

.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}

.title-font {
  width: 64px;
  height: 22px;
  font-size: 16px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 19px;
  -webkit-background-clip: text;
}

.name-font {
  display: inline-block;
  vertical-align: middle;
  width: 330px;
  height: 30px;
  font-size: 14px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 16px;
  -webkit-background-clip: text;
}

.card-style {
  // width: 1752px;
  margin: 25px 0;
  height: 100px;
  // background: linear-gradient(180deg, #f8fbff 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #e5eaf0;
}

.blue-gan {
  width: 4px;
  height: 16px;
  background: #0c7ff2;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
</style>
